<template>
  <div class="box">
    <div class="one">
      <h2>推荐：</h2>
      <span style="margin-right: 13px">更多&nbsp;&nbsp;></span>
    </div>
    <ul v-for="(item, index) in newsTopList" class="two">
      <li :class="{ 'first-li': index === 0,'last-li': index === newsTopList.length - 1  }">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { postLoadAllTopNews } from "@/api/Home";
import { onMounted, ref } from "vue";

let newsTopList = ref([]);
const loadAllTopNews = async () => {
  const newQueryDto = { isTop: true };
  let load = await postLoadAllTopNews(newQueryDto);
  if (load.data.code === 200) {
    let aaa = load.data.data;
    // 使用 map 方法遍历数组，并取出每个元素的 name 属性
    newsTopList.value = aaa.map((item) => item.name);
  }
};

onMounted(() => {
  loadAllTopNews();
});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 350px;
  font-size: 18px;
  .one {
    display: flex;
    justify-content: space-between;
    // align-content: center;
    align-items: center;
  }
  .two li {
    width: 100%;
  margin: 14px 0;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.two .first-li {
  margin-top: 0;
}
.two .last-li {
    margin-bottom: 0;
}
 
}
</style>
